<template>
  <div>
    <BackBtn/>
    <div id="container"></div>
    <div class="content">
      <div class="card">
        <div class="title">当前您的城市信息为：</div>
        <div class="city">{{ city }}</div>
        <div class="city-ip">经度：{{ lng }},纬度：{{ lat }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      map: null,
      city: '',
      center: [116.39, 39.9],
      lng: 116.39,
      lat: 39.9
    };
  },
  methods: {
    _initMap() {
      AMapLoader.load({
        key: "7d874fc1030f7d5dd321a6fdc7ede910", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 13, //初始化地图级别
            center: this.center, //初始化地图中心点位置
          });
          // 点标记
          let marker = new AMap.Marker({
              position: new AMap.LngLat(this.lng, this.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: this.city
          });
          this.map.add(marker);
          // 地图控件
          this.map.plugin(['AMap.Scale','AMap.MapType'], () => {
            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.MapType());
          })
          // 点标记弹窗
          let content = [
            `<div style="font-size: 15px;color: #666;">当前位置：</div>`,
            `<div class="city-name">${this.city}</div>`
          ];
          // 创建 infoWindow 实例	
          let infoWindow = new AMap.InfoWindow({
            anchor: 'top-center',
            content: content.join('') //传入 dom 对象，或者 html 字符串
          });
          // 点击事件
          marker.on('click', () => {
            // 打开信息窗体
            infoWindow.open(this.map, this.center);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getIPCity() {
      var data = {
        key: "YDPBZ-EPDLJ-72HF5-K4EU4-JI5I5-NAFBI", //密钥
      };
      var url = "https://apis.map.qq.com/ws/location/v1/ip"; //腾讯地理位置信息接口
      data.output = "jsonp"; // 解决跨域问题
      this.$jsonp(url, data)
        .then((res) => {
          // console.log('IP所在市',res.result.ad_info.city);
          // console.log('ip所属区',res.result.ad_info.district);
          this.city = res.result.ad_info.city + res.result.ad_info.district;
          // 当前位置经纬度
          // location  lat :  31.79322 lng :  117.30794
          this.center = [res.result.location.lng, res.result.location.lat]
          this.lng = res.result.location.lng
          this.lat = res.result.location.lat
          // console.log(res.result.location.lng, res.result.location.lat);
          return res;
        })
        .catch((error) => {});
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this._initMap();
    // 获取当前ip
    this.getIPCity();
  },
  watch: {
    center(val) {
      // console.log(val);
      this.$nextTick(() => {
        this._initMap();
      })
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 80vh;
}
.city-name {
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
}
.content {
  padding: 10px;
  height: 20vh;
  box-sizing: border-box;
  background-color: #fff;
  .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #767676;
    }
    .city {
      font-size: 20px;
    }
    .city-ip {
      color: #767676;
    }
  }
}
</style>
